import React from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { createForm } from 'rc-form';
import cx from 'classnames';
import { WingBlank, WhiteSpace, Flex, List, Button } from 'antd-mobile';
import styles from '../scale/styles.less';
import {SCALE_HYP} from 'const';

function ScaleHypTemplate({ dispatch, location, form, detail, ...rest }) {
  document.body.scrollTop = document.documentElement.scrollTop = 0;
  const { state, query } = location;
  const { getFieldProps, getFieldValue, setFieldsValue, validateFields } = form;

  const { step, ...restState } = state;

  function handleChange({ target: { type, name, value, id } }) {
    setFieldsValue({ [name]: id });
  }

  function submitHandler() {
    // 提交事件
    validateFields((err, values) => {
      const ret = [];
      Object.keys(values).forEach((key) => {
        if (!values[key]) {
          values[key] = 0;
        }
        ret.push({id:values[key],title:key});
      });
      Toast.loading('正在加载');
      if (!err) {
        dispatch({
          type: 'scale/submitQuestions1',
          payload: {
            // type: query.type || state.type,
            type: 'hyp',
            patientId: query.memberid || state.patientid,
            familyId: query.doctorid,
            patientValue: ret.join(''),
            ...rest,
          },
        });
      }
    });
  }

  function isActive(key, value, i,id) {
    if (detail && detail.PatientValue) {
      return detail.PatientValue.split('')[i] === id;
    }

    if (!getFieldValue(key)) {
      return false;
    }

    return getFieldValue(key) === id;
  }

  function gotoDetail(question, step) {
    dispatch(
      routerRedux.replace({
        pathname: `${location.pathname}/detail`,
        state: {
          step,
          ...restState,
        },
      }),
    );
  }

  return (
    <WingBlank size="md">
      <WhiteSpace />
      <List>
        {SCALE_HYP.map((question, i) => (
          <List.Item arrow="horizontal" key={i} onClick={() => gotoDetail(question, i)}>
            {question.title}
          </List.Item>
        ))}
        <List.Item arrow="horizontal" key="bzfx" onClick={() => {}}>
          辨证分型
        </List.Item>
      </List>
      <WhiteSpace size="xl" />
    </WingBlank>
  );
}

export default connect(({ scale }) => ({ ...scale }))(createForm()(ScaleHypTemplate));
